<template>
	<view style="width:100vw; height:100vh;" class="" >
		<!-- #ifdef H5 -->
		<view style="background: linear-gradient(45deg, #35B5FF 0%, #007AFF 100%); width: 100%; height: 450rpx;">
		<!-- #endif -->
		<!-- #ifndef H5 -->
		<view style="background: linear-gradient(45deg, #35B5FF 0%, #007AFF 100%); width: 100%; height: 500rpx;">
		<!-- #endif -->
			<!-- 顶部按钮 -->
			<view class="cu-custom" :style="[{height:CustomBar + 'px'}]">
				<view class="cu-bar fixed flex justify-between padding-bottom" :style="{height:CustomBar+'px',paddingTop:StatusBar+'px'}" style="font-size: 50rpx;" >
					<text class="text-white cuIcon-mail margin-left" @click="$Router.push({name: 'chatList'})"></text>
					<text class="content" :style="[{top:StatusBar + 'px'}]">
					</text>
					<text v-if="develop" class=" text-white cuIcon-scan margin-right"></text>
				</view>
			</view>
				
			<!-- 个人信息栏 -->
			<view class="flex justify-between text-white " >
				<!-- 头像、姓名 -->
				<view class="align-center">
					<view class="cu-avatar lg round margin-left margin-right-sm" :style="'background-image:url('+user.avatar+');'"></view>
					<text style="font-size: 34rpx; font-weight: 600;">{{user.username}}</text>
				</view>
				<!-- 个人中心 -->
				<view class="flex align-center">
					<navigator url="/pages/mine/myCenter" style="font-size: 28rpx;">个人中心 <text class=" cuIcon-right margin-right margin-left-xs"></text></navigator>
				</view>
			</view>
			<!-- 统计信息 -->
			<view class="flex text-white margin-top margin-bottom" style="font-size: 30rpx;animation: slide-left 0.8s 1">
				<!-- 获赞 -->
				<view class="flex flex-sub flex-direction align-center" @click="$Router.push({name: 'myLiked'})">
					<text style="margin-bottom: 14rpx;">{{userData.likeCount}}</text>
					<text>获赞</text>
				</view>
				<!-- 粉丝 -->
				<view class="flex flex-direction  flex-sub align-center" @click="$Router.push({name:'followList', params:{type: 'fan'}})">
					<text style="margin-bottom: 14rpx;">{{userData.fanCount}}</text>
					<text>粉丝</text>
				</view>
				<!-- 关注 -->
				<view class="flex flex-direction flex-sub  align-center" @click="$Router.push({name:'followList', params:{type: 'followee'}})">
					<text style="margin-bottom: 14rpx;">{{userData.followerCount}}</text>
					<text>关注</text>
				</view>
			</view>
		</view>
		<!-- 功能栏 -->
		<view class="bg-white flex align-center justify-center padding-bottom padding-top margin-left-xl margin-right-xl fun-box">
			<!-- 已购 -->
			<view class="flex align-center flex-direction flex-sub" style="animation: slide-bottom 1.4s 1;" @click="$Router.push({name: 'myPurchased'})">
				<text class="cuIcon-shopfill text-blue" style="font-size: 50rpx;"></text>
				<text>已购</text>
			</view>
			<!-- 学习记录 -->
			<view class="flex align-center flex-direction flex-sub" style="animation: slide-bottom 1.6s 1;" @click="$Router.push({name: 'myLearnRecord'})">
				<text class="cuIcon-timefill text-blue" style="font-size: 50rpx;"></text>
				<text>学习记录</text>
			</view>
			<!-- 收藏 -->
			<view class="flex align-center flex-direction flex-sub" @click="$Router.push({name:'myFavorite'})" style="animation: slide-bottom 1.8s 1;">
				<text class="cuIcon-likefill text-blue" style="font-size: 50rpx;"></text>
				<text>收藏</text>
			</view>
			<!-- 下载 -->
			<view class="flex align-center flex-direction flex-sub" v-if="develop" style="animation: slide-bottom 2s 1;">
				<text class="cuIcon-down text-blue" style="font-size: 50rpx;"></text>
				<text>下载管理</text>
			</view>
		</view>
		<view  class="margin create-center">
			<!-- 创作中心 -->
			<view class="flex justify-between align-center ">
				<text style="font-size: 34rpx; font-weight: 600;">创作中心</text>
				<navigator class="text-grey" url="../createCenter/createCenter">进入<text class=" cuIcon-right margin-left-xs"></text></navigator>
			</view>
			<view class="flex justify-center align-center margin-top-lg" >
				<view class="flex flex-direction flex-sub align-center" @click="$Router.push({name:'createCenter'})" style="animation: show 1.4s 1">
					<text class="cuIcon-creative" style="font-size: 50rpx;"></text>
					<text>创作首页</text>
				</view>
				<view class="flex flex-direction flex-sub align-center" @click="$Router.push({name:'dataHelper'})" style="animation: show 1.6s 1">
					<text class="cuIcon-calendar" style="font-size: 50rpx;"></text>
					<text>数据助手</text>
				</view>
				<view class="flex flex-direction flex-sub align-center" v-if="develop" style="animation: show 1.8s 1">
					<text class="cuIcon-moneybag" style="font-size: 50rpx;"></text>
					<text>提现</text>
				</view>
				<view class="flex flex-direction flex-sub align-center" @click="$Router.push({name:'drafts'})" style="animation: show 2s 1">
					<text class="cuIcon-text" style="font-size: 50rpx;"></text>
					<text>草稿箱</text>
				</view>
			</view>
		</view>
		<!-- 更多服务 -->
		<view class="margin-left margin-right" style="animation: show 0.8s 1;">
			<text style="font-size: 34rpx; font-weight: 600; ">更多服务</text>
			<view class="flex justify-center align-center margin-top-lg" >
				<view class="flex flex-direction flex-sub align-center" @click="$Router.push({name:'myComment'})" style="animation: show 1.4s 1">
					<text class="cuIcon-comment" style="font-size: 50rpx;"></text>
					<text>评论管理</text>
				</view>
				<view class="flex flex-direction flex-sub align-center" @click="$Router.push({name:'myLike'})" style="animation: show 1.6s 1">
					<text class="cuIcon-appreciate" style="font-size: 50rpx;"></text>
					<text>我的点赞</text>
				</view>
				<view class="flex flex-direction flex-sub align-center" v-if="develop" style="animation: show 1.8s 1">
					<text class="cuIcon-service" style="font-size: 50rpx;"></text>
					<text>用户反馈</text>
				</view>
				<view class="flex flex-direction flex-sub align-center" @click="$Router.push({name: 'setting'})" style="animation: show 2s 1">
					<text class="cuIcon-settings" style="font-size: 50rpx;"></text>
					<text>设置</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 本页面作为组件使用，引入indexFrontEnd，没有页面专有的onLoad()生命周期方法
	import mineApi from '../../api/mineApi.js'
	export default {
		data() {
			return {
				user: {},
				userData: {}
			}
		},
		methods: {
			
		},
		mounted() {	
			this.user.userid = this.$store.getters.userid;
			// console.log(this.user.userid)
			mineApi.getMemberInfo(this.user.userid).then(res=>{
				if (res.data) {
					this.user = res.data;
				}
			}).catch(err => {
				console.log(err);
			});
			
			mineApi.getMemberData(this.user.userid).then(res=>{
				let data = res.data;
				if (data.success) {
					this.userData = data.result;
				}else {
					console.log(data.message);
				}
			}).catch(err => {
				console.log(err);
			});
		}
	}
</script>

<style>
	.fun-box{
		border-radius: 30rpx; 
		transform: translateY(-50%) ;
		animation: fun .8s  1; 
		box-shadow: #6f6f6f 0rpx 2rpx 5rpx; 
	}
	@keyframes fun{
		0%{
			opacity: .5;
			transform: translateY(0);
		}
		100%{
			opacity: 1;
			transform: translateY(-50%);
		}
	}
	.create-center{
		animation: center 1s 1;
		transform: translateY(-30%);
	}
	@keyframes center{
		0% {
			opacity: 0;
			transform: translateY(0);
		}
		60% {
			opacity: 0.8;
			transform: translateY(-50%);
		}
		
		100% {
			opacity: 1;
			transform: translateY(-30%);
		}
	}
</style>
